<template>
  <el-row :gutter="viewGutter">
    <el-col :xs="col.xs" :sm="col.sm" :md="col.md" :lg="col.lg" :xl="col.xl">
      <slot>
        <div>view</div>
      </slot>
    </el-col>
  </el-row>
</template>
<script>
export default {
  name: 'FormView',
  props: {
    viewGutter: {
      type: Number,
      default: 10
    },
    viewType: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      label: {
        xs: { span: 24, offset: 0 },
        sm: { span: 16, offset: 0 },
        md: { span: 10, offset: 1 },
        lg: { span: 10, offset: 1 },
        xl: { span: 10, offset: 1 }
      },
      text: {
        xs: { span: 24, offset: 0 },
        sm: { span: 24, offset: 0 },
        md: { span: 24, offset: 0 },
        lg: { span: 18, offset: 1 },
        xl: { span: 16, offset: 1 }
      },
      btn: {
        xs: { span: 10, offset: 14 },
        sm: { span: 6, offset: 18 },
        md: { span: 6, offset: 18 },
        lg: { span: 6, offset: 18 },
        xl: { span: 6, offset: 18 }
      },
      line: {
        xs: { span: 24, offset: 0 },
        sm: { span: 24, offset: 0 },
        md: { span: 24, offset: 0 },
        lg: { span: 8, offset: 1 },
        xl: { span: 8, offset: 1 }
      },
      col: this.label
    }
  },
  created() {
    if (this.viewType === 0) {
      this.col = this.label
    } else if (this.viewType === 1) {
      this.col = this.text
    } else if (this.viewType === 2) {
      this.col = this.btn
    } else if (this.viewType === 3) {
      this.col = this.line
    }
  }
}
</script>
